.content {
    position: relative;
    width: 100%;
    height: 100vh;
}

.poster {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.poster .poster_bg {
    width: 100%;
    height: 100vh;
    opacity: 1;
    object-fit: cover;
}

.drawpage {
    position: relative;
    width: 100%;
    max-width: 768px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.banner,
.draw {
    position: absolute;
    width: 100%;
    left: 0;
    display: flex;
    justify-content: space-around;
}

.banner {
    top: 30px;
}

.draw {
    bottom: 40px;
}

.banner_item,
.draw_item {
    height: 50px;
    background-color: rgba(17, 17, 17, 0.5);
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 35%);
    border-radius: 5px;
    line-height: 50px;
    text-align: center;
    color: #fff;
}

.banner_item:hover,
.draw_item:hover,
.banner_item:active,
.draw_item:active {
    border: #fff solid 1px;
}

.banner_item {
    width: 22%;
}

.draw_item {
    width: 40%;
}

.banner_button,
.draw_button {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .banner_item {
        height: 25px;
        font-size: 12px;
        line-height: 25px;
    }

    .banner_item {
        width: 20%;
    }

    .banner_item:last-child {
        width: 30%;
    }

    .banner_button {
        font-size: 12px;
    }
}


.ratepage,
.cardpage {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 500;
    width: 100%;
    height: 100%;
    background-color: rgba(17, 17, 17, 0.9);
    overflow: auto;
}

.ratepage {
    color: #fff;
}

.ratepage_header,
.cardpage_header,
.drawalert_header {
    width: 100%;
    height: 60px;
    background-color: rgb(17, 17, 17);
    overflow: hidden;
}

.ratepage_button,
.cardpage_button,
.drawalert_button {
    float: right;
    margin-top: 25px;
    margin-right: 25px;
    font-size: 20px;
    color: #fff;
}

.ratepage_content,
.cardpage_content {
    width: 86%;
    margin: 0 auto;
    margin-bottom: 50px;
    font-size: 12px;
    line-height: 1.5;
}

.ratepage_content_item {
    margin-top: 20px;
}

.ratepage_content_item h4,
.ratepage_content_item p,
.ratepage_content_item table {
    margin-bottom: 5px;
}

.ratepage_content_item p:first-of-type {
    color: tomato;
}

.ratepage_content_item h4 {
    line-height: 2;
    font-weight: normal;
}

.ratepage_table {
    border-collapse: collapse;
    width: 100%;
}

.ratepage_table,
.ratepage_table th,
.ratepage_table td {
    border: 1px solid #fff;
}

.ratepage_table th,
.ratepage_table td {
    text-align: center;
    font-weight: normal;
}


.cardpage_button {
    color: #fff;
}

.cardpage_cat {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}

.cardpage_cat_item {
    width: 25%;
    height: 20px;
}

.cardpage_content_button {
    display: block;
    width: 80%;
    height: 100%;
    margin: 0 auto;
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 5px;
    text-align: center;
    line-height: 20px;
    color: #fff;
}

.cardpage_content_button_active {
    background-color: rgba(255, 255, 255, 0.8);
    color: #000;
    border: #fff 1px solid;
}

.cardpade_char {
    overflow: hidden;
}

.drawalert_item,
.cardpage_char_item {
    display: block;
    float: left;
    width: 25%;
    height: auto;
    margin-top: 20px;
}

.drawalert_item_wrap,
.cardpage_char_wrap {
    display: block;
    width: 80%;
    margin: 2px auto;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    text-align: center;
    overflow: hidden;
}

.cardpage_char_wrap_none {
    opacity: 0.3;
}

.drawalert_item_img,
.cardpage_char_img {
    display: block;
    width: 100%;
}

.drawalert_item_name,
.cardpage_char_name,
.cardpage_char_num {
    font-size: 12px;
    line-height: 1.5;
}

.drawalert {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 400;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.5);
}

.drawalter_wrap {
    position: relative;
    top: 15%;
    z-index: 500;
    height: auto;
    width: 100%;
    background-color: rgba(17, 17, 17, 0.8);
    box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 35%);
    -webkit-box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 35%);
    -moz-box-shadow: 0px 3px 7px 0px rgb(0 0 0 / 35%);
    overflow: hidden;
}

.drawalert_content {
    margin: 0px 20px 20px 20px;
    overflow: hidden;
}

.drawalert_item_wrap {
    box-shadow: 0px 0px 2px 2px rgb(100, 100, 100, 35%);
    -webkit-box-shadow: 0px 0px 2px 2px rgb(100, 100, 100, 35%);
    -moz-box-shadow: 0px 0px 2px 2px rgb(100, 100, 100, 35%);
}

.drawalert_item_wrap_four,
.drawalert_item_wrap_five {
    box-shadow: 0px 0px 2px 2px rgb(255, 255, 255, 35%);
    -webkit-box-shadow: 0px 0px 2px 2px rgb(255, 255, 255, 35%);
    -moz-box-shadow: 0px 0px 2px 2px rgb(255, 255, 255, 35%);
}

.drawalert_item_name {
    color: rgb(100, 100, 100);
}

.drawalert_item_name_four {
    color: rgb(129, 104, 166);
    font-weight: bold;
}

.drawalert_item_name_five {
    color: rgb(193, 130, 77);
    font-weight: bold;
}